<template>
<div id="road" @click="change"
      :style="log == 0 ? 'background-color:rgb(245, 245, 245)' : 'background-color: rgba(13, 13, 13, 0.8)'">范围查询</div>
      <Display v-if="showData" :dataS="dataSource" />
</template>

<script setup>
import { ref, computed,inject,onMounted } from 'vue'
import { DrawEvent, DrawPolygon, DrawRect, DrawCircle } from '@antv/l7-draw'
import { point, polygon, booleanPointInPolygon } from '@turf/turf'
import axios from 'axios'
import Display from './Display.vue'
const { scene, map } = inject("$scene_map");
const log = ref(0);
const drawTools = {}
const showData = computed(() => {
    return dataSource.value.length
})
const stopDrawing = (destroy) => {

    activeTool.clear()
        activeTool.disable()
        activeTool.removeActiveFeature()
        destroy && activeTool.destroy()
    
    
}
let eventsData = []
const dataSource = ref([])
onMounted(() => {

  getData()
})
const getData = async () => {
  const res = await axios('http://localhost:8080/events')
  if (res.status === 200) {
    eventsData = res.data.features
    //ElMessage({
    //  message: '获取数据成功',
    //  type: 'success',
    //})
  } else {
    ElMessage.error('获取数据失败')
  }
}
const activeTool = new DrawCircle(scene, {
                    //展示面积
                    areaOptions: {},
                });
         
const change = () => {
    if (log.value == 0) {
      log.value = 1
      // 激活绘制工具
      activeTool.enable();
        // DrawEvent.Change会监听每次数据变化的时候，返回绘制的结果数据,我们不需要绘制很多图形，所以每次只保留最新的数据
        activeTool.on(DrawEvent.Change, (allFeatures) => {
            // 每次双击之后，只保留当前绘制的

            let activeFeature = allFeatures[allFeatures.length - 1]
            allFeatures.forEach((item, index) => {
                if (index !== allFeatures.length - 1) {
                    activeTool.removeFeature(item)
                }
            })
            if (eventsData.length && activeFeature) {
        const { geometry: { coordinates: coordinatesActive } } = activeFeature
        // 使用turf判断框选范围内是否存在事件
        const resData = eventsData.filter(item => {
          const { geometry } = item
          if (geometry.type === 'Point') {
            const pt = point(geometry.coordinates);
            const poly = polygon(coordinatesActive)
            const isInArea = booleanPointInPolygon(pt, poly)
            return isInArea
          }
        })
        dataSource.value = resData
        console.log(dataSource)
        if(resData.length>0){showData.value = resData.length}
        
        }
        console.log(showData)
        })
    
    } else {
      log.value = 0
      activeTool.clear()
      activeTool.disable()
      activeTool.removeActiveFeature() 
      
    }
  }

</script>
<style scoped>
  #road {
    height: 100%;
    width: 150px;
    font-size: 25px;
    color: grey;
    line-height: 80px;
    border-left: 1px solid;
    border-color: gray;
    padding-left: 7px;
    padding-right: 7px;
    align-items: center;
    display: flex;
    justify-content: center;
  
  }
</style>